<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
         <el-form-item label="OBD设备号" prop="simpledetails">
          <el-input v-model="ruleForm.simpledetails"></el-input>
        </el-form-item>
        <el-form-item label="正文内容" prop="textNode">
          <quill ref="quill" v-model="ruleForm.textdetails" @textChange="textChange"></quill>
          <!-- <quill ref="quill" :v-model="ruleForm.desc"></quill>  -->
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="dialogValue('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { axios } from "@/api/axios";
import {
  listJson,
  changeIsRead,
  addFileUpload,
  findCompanys,
  findDetails
} from "@/api/infomaction";
import quill from "@/components/quill/index";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: true
    },
    addMode: {
      type: Boolean
    }
  },
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"])
  },
  components: {
    quill
  },
  data() {
    var textNode = (rule, value, callback) => {
      if (this.ruleForm.text == "") {
        return callback(new Error("文本内容分不能为空"));
      } else {
        callback();
      }
    };
    var validateDeviceNo = (rule, value, callback)=> {
    if (value && !(/^[1-9]\d*$/).test(value)) {
      callback(new Error('只能填写正整数'))
    } else {
      if (!/^[0-9]{12}$/.test(value)) {
        callback(new Error('请输入12位数字的编码！'));
      } else {
        callback();
      }
    }
  };
    return {
      loginname: "",
      companyId: null, //单位id
      comid: null, //用户id
      userid: null, //用户id
      mobile: null, //用户电话
      companyNmaeId: "",
      uploadUrl: "", //上传地址
      getfile: "", //需要上传的文件
      ruleForm: {
        title: "",
        titleNode: "",
        obdCode:"",
        IssuedBy: "",
        textdetails: "",
        allcom: "",
        comids: null,
        id: "",
        companyId: "",
        companyName: "",
        createtime: "",
        fujianurl: ""
      },
      listDataSelected: [],
      editData: [],
      dialogVisible2: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        simpledetails: [{ validator: validateDeviceNo,   trigger: "blur" }],
        textNode: [{ validator: textNode, trigger: "blur" }]
      },
      value1: "",
      value2: "",
      value3: "",
      input2: "",
      total: 0,
      total2: 0,
      pageNo: 1,
      tableData: null,
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 1,
      multipleSelection: []
    };
  },
  watch: {
    data() {
      if (this.addMode == false) {
        if (this.data.length != 0) {
          this.ruleForm = this.data;
          console.log(this.data);
        }
      }
    },
    dialogVisible() {
       if (this.dialogVisible == true) {
        if (this.addMode) {
          setTimeout(() => {
            this.$refs.ersty.clearFiles();
            this.$refs.quill.setContents("");
            this.ruleForm.textdetails = "";
          }, 0);
        } else {
          setTimeout(() => {
            this.$refs.quill.onHtml(this.ruleForm.textdetails);
          }, 0);
        }
      }
    },
    selectedComIds() {
      this.pageNo = 1;
      this.findCompanys();
    }
  },
  created() {
    this.comid = this.userInfo.comid;
    this.userid = this.userInfo.userid;
    this.loginname = this.userInfo.loginname;
    this.mobile = this.userInfo.mobile;
  },
  methods: {
    //表格多选
    handleSelectionChange(val) {
      this.listDataSelected = val;
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    handleClose2() {
      this.dialogVisible2 = false;
    },

    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.findCompanys();
    },
    // 富文本
    textChange(d) {
      this.ruleForm.textdetails = d;
    },
    // 添加接口
    addFileDownload() {
      console.log(
        this.ruleForm.title,
        this.ruleForm.loginname,
        this.userid,
        this.ruleForm.simpledetails
      );
      axios("/admin/file/addFileDownload.do", "post", {
        title: this.ruleForm.title,
        "creator.userid": this.userid,
        textdetails: this.ruleForm.textdetails,
        companyId: this.comid,
        simpledetails:this.ruleForm.simpledetails,
        type: 5
      }).then(data => {
       if (data.error == "1") {
          this.$message.error("系统错误，新增失败");
        } else {
           this.$message({
              message: "新增成功",
              type: "success"
            });
          this.empty();
          this.$emit("finish", 1);
          this.$emit("update:dialogVisible", false);
        }
      });
    },
    // 修改接口
    changeFileDownload() {
      console.log(
        this.ruleForm.id,
        this.ruleForm.title,
        this.ruleForm.loginname,
        this.userid,
        this.ruleForm.simpledetails
      );
      axios("/admin/file/changeFileDownload.do", "post", {
        id: this.ruleForm.id,
        title: this.ruleForm.title,
        textdetails: this.ruleForm.textdetails,
        "creator.userid": this.userid,
        simpledetails:this.ruleForm.simpledetails,
        companyId: this.comid,
        type: 5
      }).then(data => {
        if (data.error == "1") {
          this.$message.error("系统错误，修改失败");
        } else {
           this.$message({
              message: "修改成功",
              type: "success"
            });
          this.empty();
          this.$emit("finish", 1);
          this.$emit("update:dialogVisible", false);
        }
      });
    },
    //  添加数据
    dialogValue(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.addMode) {
            this.addFileDownload();
          } else {
            this.changeFileDownload();
          }
        } else {
          this.$message.error("有错误，请检验是否输入必选项");
          return false;
        }
      });
    },

    empty() {
      this.ruleForm.id = "";
      this.ruleForm.title = "";
      this.ruleForm.titleNode = "";
      this.ruleForm.fujianurl = "";
      this.ruleForm.fjname = "";
      this.ruleForm.textdetails = "";
      this.ruleForm.allcom = "";
      this.ruleForm.companyId = "";
      this.ruleForm.companyName = "";
      this.ruleForm.simpledetails = "";
    }
  }
};
</script>

<style>
</style>
